<template>
  <ul class="news-list">
    <!-- <li>编号：{{ route.query.id }}</li>
    <li>标题：{{ route.query.title }}</li>
    <li>内容：{{ route.query.content }}</li> -->


    <li>编号：{{ id }}</li>
    <li>标题：{{ title }}</li>
    <li>内容：{{ content }}</li>
  </ul>
</template>

<script setup lang="ts" name="Detail">
import { reactive, toRefs } from 'vue';
import { useRoute } from 'vue-router';
import { computed } from 'vue';

const route = useRoute();

// let query = reactive(route.query);
// console.log(route.query.id);
// console.log(route.query.title);
// console.log(route.query.content);
// console.log(query);

// const { id, title, content } = toRefs(query);
// console.log('标题：', title)

// 使用 computed 来获取路由参数，这样可以确保响应性
const id = computed(() => route.query.id);
const title = computed(() => route.query.title);
const content = computed(() => route.query.content);

</script>

<style scoped>
.news-list {
  list-style: none;
  padding-left: 20px;
}

.news-list>li {
  line-height: 30px;
}
</style>